<template>
  <div class="my-order">
    <div class="header">
      <div class="title">我的订单</div>
    </div>
    <div class="order-container">
      <el-tabs v-model="currentSelect" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in orderStatusList"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        >
          <div class="order-list">
            <div
              class="order-card"
              v-for="item in orderList"
              :key="item.orderId"
              @click="toDetail(item.orderId)"
            >
              <div class="order-header">
                <div style="display: flex; align-items: center">
                  <el-avatar :size="25" style="margin-right: 10px">
                    <div style="background-color: #00caa8; border-radius: 50%">
                      {{ item.items[0].sellerName.slice(0, 1) }}
                    </div>
                  </el-avatar>

                  <div>{{ item.items[0].sellerName }}</div>
                </div>

                <div class="status">{{ showStautsName(item.status) }}</div>
              </div>
              <div class="order-info">
                <div class="img-name">
                  <el-image
                    style="width: 90px; height: 90px"
                    fit="fit"
                    :src="item.items[0].productImage"
                  />
                  <div>{{ item.items[0].productName }}</div>
                </div>
                <div class="price-amount">
                  <div>¥{{ item.items[0].price }}</div>
                  <div class="amount">x{{ item.items[0].quantity }}</div>
                  <div class="total">
                    总价：¥
                    {{ item.items[0].price * item.items[0].quantity }}
                  </div>
                </div>
              </div>
              <div class="action">
                <el-button
                  :size="size"
                  v-if="item.status == 'completed'"
                  @click.stop="toGoodsDetail(item.items[0].productId)"
                  >再次购买</el-button
                >
                <el-button
                  v-if="item.status == 'completed'"
                  :size="size"
                  type="primary"
                  @click.stop="toGoodsDetail(item.items[0].productId)"
                  >评价</el-button
                >
                <el-button
                  v-if="item.status == 'pending_payment'"
                  :size="size"
                  type="primary"
                  @click.stop="toPay(item.orderId)"
                  >付款</el-button
                >
                <el-button
                  v-if="item.status == 'pending_receipt'"
                  :size="size"
                  type="primary"
                  @click.stop="confirmReceipt(item.orderId)"
                  >确认收货</el-button
                >
              </div>
            </div>
          </div>
          <el-empty
            v-if="orderList.length === 0"
            description="暂无数据"
          ></el-empty>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
import Order from "./orderModel/Order";
export default {
  name: "MyOrder",
  components: { Order },
  data() {
    return {
      size: "small",
      currentSelect: "all",
      orderStatusList: [
        { label: "全部", value: "all" },
        { label: "待付款", value: "pending_payment" },
        { label: "待发货", value: "pending_delivery" },
        { label: "待收货", value: "pending_receipt" },
        { label: "已完成", value: "completed" },
        { label: "已取消", value: "canceled" },
      ],
      orderList: [],
      sellPrice: 0,
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      let url = `orders/user/${this.$store.state.user.userId}`;
      if (this.currentSelect != "all") {
        url += `?status=${this.currentSelect}`;
      }
      this.$axios.put(url).then((res) => {
        if (res.status === 200) {
          this.orderList = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleClick() {
      this.getOrderList();
    },
    toDetail(id) {
      this.$router.push(`/orderDetail/${id}`);
    },
    toGoodsDetail(goodsId) {
      this.$router.push(`/index/goodDetail/${goodsId}`);
    },
    confirmReceipt(orderId) {
      this.$confirm("您确定要确认收货吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.put(`orders/status/${orderId}/completed`).then((res) => {
            if (res.status === 200) {
              this.$message.success("确认收货成功");
              this.getOrderList();
            }
          });
        })
        .catch(() => {});
    },
    toPay(orderId) {
      this.$axios.post("/orders/repay/" + orderId).then(
        (res) => {
          console.log(res);
          if (res.data.success) {
            this.payUrl = res.data.paymentUrl;
            this.pay();
          } else {
            this.$message.error(res.data.message);
          }
        },
        (err) => {
          this.$message.error(err);
        }
      );
    },
    pay() {
      window.open("http://localhost:8086" + this.payUrl, "_self");
    },
    showStautsName(status) {
      for (let i = 0; i < this.orderStatusList.length; i++) {
        if (this.orderStatusList[i].value == status) {
          return this.orderStatusList[i].label;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-order {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .title {
      font-size: 1.2em;
      font-weight: bold;
      text-align: left;
    }
  }

  .order-container {
    width: 100%;
    margin-top: 20px;

    .order-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 20px;

      .order-card {
        cursor: pointer;
        border: 1px solid #f2f2f2;
        border-radius: 10px;
        padding: 10px;

        .order-header {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .status {
            font-size: 0.9em;
            color: #00caa8;
          }
        }

        .order-info {
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          text-align: left;

          .img-name {
            display: flex;
          }

          .el-image {
            border-radius: 10px;
            margin-right: 10px;
          }

          .price-amount {
            margin-top: 5px;
            margin-left: 20px;
            color: #ff4f24;
            text-align: right;

            .amount {
              color: #999;
              font-weight: normal;
              font-size: 0.8em;
              margin-top: 10px;
            }

            .total {
              color: #666;
              font-weight: normal;
              font-size: 1em;
              margin-top: 15px;
              font-size: 0.9em;
            }
          }
        }

        .action {
          margin-top: 15px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>